<template>
    <div class="main bg-white">
        <el-affix position="top" :offset="60" >
        <!-- <div>按题目批阅中的查看--详情统计</div> --> 
       <div class=" p-6  border-b  flex items-center justify-between"> 
            <div class="space-y-2">
                <div class="flex items-center" v-if="currentQuestion">
                    <span class="text-gray-400">({{ currentQuestion.type }})</span>
                    <span>{{ currentQuestion.content}}</span>
                </div>
                <ul v-if=" currentQuestion && currentQuestion.type=='单选题'">
                    <li v-for="(item ,index) in currentQuestion.options" :key="index">{{ item  }}</li>
                </ul>
                <div v-if=" currentQuestion &&  currentQuestion.type!='简答题'">
                    <span class="font-bold">答案:</span>
                    <span v-for="(answer, index) in currentQuestion.answer" :key="index">{{ answer}}</span>
                </div>
            </div>    
            <div class="flex items-center ">
                <el-button  round class="w-20" @click="handlePreQuestion"  v-if="currentQuestionIndex > 0">上一题</el-button>
                <el-button type="primary" round class="w-20" @click="handleNextQuestion" v-if="currentQuestionIndex < questionDetail.length - 1" > 下一题</el-button>
            </div>
        </div>
        </el-affix>
        <!-- 详情统计  针对主观题 -->
         <DetailStaticEcharts  :data="data" v-if="currentQuestion && currentQuestion.type!='简答题'"></DetailStaticEcharts>
         <!-- 学生的答题记录数据展示 -->
        <div class="p-6 space-y-6">
            <p class="font-bold">答题记录</p>
            <div class="flex items-center space-x-4" v-if="currentQuestion && currentQuestion.type=='简答题'">
                <span class="text-gray-600 whitespace-nowrap">标签</span>
                <el-select v-model="selectedMark" placeholder="请选择" class="w-40">
                    <el-option :label="item.mark" :value="item.markId" v-for="item in markList"></el-option>
                </el-select>  
                <el-button  class="w-20" round @click="byMarkFilter">筛选</el-button> 
            </div>
        </div>
        <!-- 数据表格部分 -->
         <div class="p-6 space-y-6">
            <div class="flex items-center justify-between text-sm">
                <span class="text-gray-400 whitespace-nowrap">共{{studentCount}}名学生</span>
                <div class="flex items-center space-x-4 ">
                    <el-button type="primary" link>
                         <font-awesome-icon :icon="['fas', 'arrow-up-from-bracket']"  />
                         一键导出
                    </el-button>
                    <el-select v-model="selectedOption" @change="handleOptionChange" class="w-20">
                        <el-option label="全部" value="0"></el-option>
                        <el-option label="已答" value="1"></el-option>
                        <el-option label="未答" value="2"></el-option>
                    </el-select>
                     <div class="right-div relative" @click="searchByNameOrId"  @keyup="searchByNameOrId">
                      <el-input v-model.lazy.trim="keyword" placeholder="请输输入姓名或学号" style="width: 200px">
                        </el-input>
                        <el-icon  class="z-10 text-gray-400 absolute right-[10px] top-[10px] text-xl cursor-pointer">  <Search /></el-icon>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
             <el-table 
                :data="filteredItems" 
                stripe 
                style="width: 100%"  >
                <el-table-column prop="name" label="姓名"  />
                <el-table-column prop="studentId" label="学号/工号" />
                <el-table-column prop="submitTime" label="提交时间"  />
                <el-table-column prop="answer" label="答题记录" class="relative">
                    <template #default="scope">
                        <div :class="['my-6   z-10',scope.row.isShow?'':' overflow-hidden max-h-[44px]']">
                            <div v-html="scope.row.answer"></div>
                            <div @click="scope.row.isShow=true" class=" absolute right-0 bottom-[10px] pl-5   text-gray-400 inline h-5 leading-5 " v-if="!scope.row.isShow">全面展开</div>
                            <div @click="scope.row.isShow=false" class=" absolute right-0 bottom-[10px] pl-5   text-gray-400 inline h-5 leading-5 " v-else>收起</div>
                        </div>
                    </template>    
                </el-table-column>
                <el-table-column prop="mark" label="标签"  />
            </el-table>
            <!-- 分页组件 -->
             <div class="flex justify-center mt-5">
                <el-pagination layout="prev, pager, next" :total="total"
                 v-model:current-page="currentPage"
                :page-size="pageSize" 
                @current-change="handleCurrentChange" />
             </div>

         </div>
    </div>
</template>

<script setup>
import { ref, reactive, watch, toRaw, computed, onMounted } from 'vue'
import {useQuestionReviewStore} from '@/store/questionReview'
import {getDetailedStatistics,getStudentSubAnswers} from '@/api/exam'
import DetailStaticEcharts from './DetatailStaticEcharts.vue'
const  questionReviewStore = useQuestionReviewStore()
const  paperId = ref(questionReviewStore.paperId)
console.log(questionReviewStore.paperId,'---',questionReviewStore.questionId,'页面刷新');
// 分页相关数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(39)
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
const  questionDetail = ref([])
 const  markList = ref([
    { markId: "A", mark: "A" },
 ])
 const  selectedMark = ref('')
 const keyword = ref('')
 const  selectedOption = ref('0')
 const  filteredItems = ref([ ])
 //当前选中的题目
 const  currentQuestion = computed(() => { 
    return questionDetail?.value.find(item => item.questionId === questionReviewStore.questionId)
 })
 const  currentQuestionIndex = ref(0)
//学生人数
const  studentCount = ref(0)
 // 获取主观题的详细信息
 const  getSubjectiveData = async () => {
    getDetailedStatistics(paperId.value).then(res => {
        questionDetail.value = res.data.data.questions
        markList.value = res.data.data.markList
        studentCount.value = res.data.data.studentCount
        currentQuestionIndex.value = questionDetail?.value.findIndex(item => item.questionId === questionReviewStore.questionId)
        console.log(questionDetail.value,'questionDetail.value');

    })
 }
 //获取某个题目学习作答的数据
 const  getStudentSubAnswersData = async () => {
    getStudentSubAnswers(paperId.value).then(res => {
        filteredItems.value = res.data.data.answerList
        copyData.value = toRaw(filteredItems.value)

    })
 }

 // 上一题
 const  handlePreQuestion = () => {
    console.log(questionDetail.value, currentQuestionIndex.value);
    if (currentQuestionIndex.value > 0) {
        currentQuestionIndex.value--
        //当前题目的id 
        let  id =questionDetail.value[currentQuestionIndex.value].questionId
        questionReviewStore.questionId = id
        //todo 当前题目发生变化的时候再次请求后端 获取试卷 改题目学生的作答情况
        console.log(currentQuestionIndex.value);
    }
    
 }
//  下一题
 const  handleNextQuestion = () => { 
    if (currentQuestionIndex.value < questionDetail.value.length - 1) {
        currentQuestionIndex.value++
         let  id =questionDetail.value[currentQuestionIndex.value].questionId
        questionReviewStore.questionId = id
          //todo 当前题目发生变化的时候再次请求后端 获取试卷 改题目学生的作答情况
    }
 }

 //客观题的统计数据
 const data = [
  { name: 'A', value: 81.58 },
  { name: 'B', value: 7.89 },
  { name: 'C', value: 7.89 },
  { name: 'D', value: 2.63 }
];
 onMounted(async () => {
    await getSubjectiveData() 
    await getStudentSubAnswersData()
 })

//筛选的按钮被点击
const  byMarkFilter=()=>{
    if(selectedMark.value===0||selectedMark.value==='0'){
        filteredItems.value = copyData.value
    }else{
        let  newArr=[]
        for(let i=0;i<filteredItems.value.length;i++){
            if(filteredItems.value[i].mark===selectedMark.value){
                newArr.push(filteredItems.value[i])
            }
        }
        filteredItems.value=newArr
    }
}
const copyData =ref([])
// 根据是否作答帅选数据
const handleOptionChange=()=>{
    if(selectedOption.value==='0'){
        filteredItems.value=copyData.value
    }else if(selectedOption.value==='1'){
        let newArr=[]
         for(let i=0;i<filteredItems.value.length;i++){
            if(filteredItems.value[i].answer!==''){
                newArr.push(filteredItems.value[i])
            }
         }
         filteredItems.value=newArr
      
    }else if(selectedOption.value==='2'){
        let newArr=[]
         for(let i=0;i<filteredItems.value.length;i++){
            if(filteredItems.value[i].answer===''){
                newArr.push(filteredItems.value[i])
            }
         }
         filteredItems.value=newArr
    }
}

//搜索的按钮被点击
const  searchByNameOrId=()=>{
    // todo 搜索 学生姓名或者学号
    if(keyword.value===''){
        filteredItems.value=copyData.value
    }else{
        console.log(keyword.value,'搜索');
        let newArr=[]
        for(let i=0;i<filteredItems.value.length;i++){
            if(filteredItems.value[i].name.includes(keyword.value.trim())||filteredItems.value[i].studentId.includes(keyword.value.trim())){
                newArr.push(filteredItems.value[i])
            }
        }
        filteredItems.value=newArr
}
}

</script >
<style lang="less" scoped>
.right-div .el-input {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
}
.right-div .el-input :deep(.el-input__wrapper) {
 // background-color: #f3f4f6;
  border: none;
  border-radius: 20px;
  box-shadow: none;
}
.el-select :deep(.el-input__wrapper) {
  background-color: #f3f4f6;
  border: none;
  box-shadow: none;
}
.el-table :deep(th.el-table__cell) {
  background-color: #f9fafb;
  font-weight: 600;
}
</style>